@import 'utils';
@keyframes justLiked {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

.PostLeftSticker {
  position: absolute;
  width: 4rem;
  left: -7rem;
  top: 5.5rem;
  padding-top: 1rem;
  @include media('<large') {
    display: none;
  }
  .wrapper {
    border-radius: 2rem;
    padding: 0.5rem;
    background: $oc-gray-0;
    display: flex;
    flex-direction: column;
    align-items: center;
    &.fixed {
      position: fixed;
      top: 1rem;
    }
    .circle {
      width: 3rem;
      height: 3rem;
      background: white;
      border-radius: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      &.like {
        color: $oc-violet-4;
        border: 1px solid $oc-violet-4;
        &:hover {
          color: white;
          background: $oc-violet-4;
        }
        &.justLiked {
          animation: justLiked 0.25s ease-in;
          animation-fill-mode: forwards;
        }
        &.liked {
          background: $oc-violet-4;
          color: white;
          &:hover {
            background: $oc-violet-3;
          }
        }
      }
      &.share {
        color: $oc-gray-6;
        border: 1px solid $oc-gray-6;
        &:hover {
          color: $oc-gray-7;
          border: 1px solid $oc-gray-7;
        }
      }
    }
    .circle + .circle {
      margin-top: 0.5rem;
    }
    .likes-count {
      color: $oc-violet-5;
      font-weight: 600;
      font-size: 0.75rem;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
    }
  }
}
